<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="ie lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="ie lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html> <![endif]-->
<!--[if !IE]><!--><html lang="en"><!-- <![endif]-->
<head>
	<title>Happy Birthday</title>
	<meta charset="UTF-8" />
	<meta name="description" content="Happy Birthday">
	<meta name="robots" content="index, follow" />
    <meta name="keywords" content="Birthday, Happy">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./css/stylesheet.css">
	<link rel="stylesheet" type="text/css" href="./css/loading.css">
	<link rel="stylesheet/less" href="./less/cake.less">
	<script src="https://cdn.bootcss.com/less.js/2.1.0/less.min.js"></script>
</head>

<body>
	<div class="loading"></div>
	<audio class="song" controls loop>
        <source src="./music/hbd.mp3"></source>
	   Your browser isn't invited for super fun audio time.
    </audio>
    <div class="balloons text-center" id="b1">
    	<h2 style="color:#F2B300;">M</h2>
    </div>
    <div class="balloons text-center" id="b2">
    	<h2 style="color:#0719D4;">Y</h2>
    </div>
	<div class="balloons text-center" id="b3">
    	<h2 style="color:#D14D39;">L</h2>
    </div>
	<div class="balloons text-center" id="b4">
    	<h2 style="color:#8FAD00;">O</h2>
    </div>
	<div class="balloons text-center" id="b5">
    	<h2 style="color:#8377E4;">V</h2>
    </div>
    <div class="balloons text-center" id="b6">
    	<h2 style="color:#99C96A;">E</h2>
    </div>
    <div class="balloons text-center" id="b7">
    	<h2 style="color:#20CFB4;" class="heart-shape"></h2>
	</div>

    <img src=./images/Balloon-Border.png width="100%" class="balloon-border">
 

	<div class="container">
		
		<div class="row">
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_yellow"></div>
			</div>
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_red"></div>
			</div>
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_blue"></div>
			</div>
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_green"></div>
			</div>
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_pink"></div>
			</div>
			<div class="col-md-2 col-xs-2 bulb-holder">
				<div class="bulb" id="bulb_orange"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 text-center">
				<img src=./images/banner.png class="bannar">
			</div>
		</div>
		<div class="row message">
			<div class="col-md-12">
				<p>Today is...</p>
				<p>as beautiful as other days</p>
			</div>
		</div>
		<div class="row cake-cover">
			<div class="col-md-12 texr-center">
				<div class="cake">
				  <div class="velas">
				    <div class="fuego"></div>
				    <div class="fuego"></div>
				    <div class="fuego"></div>
				    <div class="fuego"></div>
				    <div class="fuego"></div>
				  </div>
				  <div class="cobertura"></div>
				  <div class="bizcocho"></div>
				</div>
			</div>
		</div>

		<div class="navbar navbar-fixed-bottom">
			<div class="row">
				<div class="col-md-6 text-center col-md-offset-3">
					<button class="btn btn-primary" id="turn_on">Turn On Lights</button>
					<button class="btn btn-primary" id="play">Play Music</button>
					<button class="btn btn-primary" id="bannar_coming">Let's Decorate</button>
					<button class="btn btn-primary" id="balloons_flying">Fly With Balloons</button>
					<button class="btn btn-primary" id="cake_fadein">Most Delicious Cake Ever</button>
					<button class="btn btn-primary" id="light_candle"> Light Candle</button>
					<button class="btn btn-primary" id="wish_message">Happy Birthday</button>
					<button class="btn btn-primary" id="story">A message for you</button>
					<!--<button class="btn btn-primary" id="cake_cut">Lrt's Cut the Cake</button>-->
				</div>
			</div>
			<!-- <div class="col-md-2">
			</div>
			<div class="col-md-2">
			</div>
			<div class="col-md-2">
			</div>
			<div class="col-md-2">
			</div>
			<div class="col-md-2">
			</div> -->
		</div>


	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="./js/effect.js"></script>
</html>
